<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">活动（会议）签到</text>
			<text class="subtitle">查看所有活动（会议）安排</text>
		</view>

		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<uni-icons type="search" size="18" color="#7a8fa6" class="search-icon"></uni-icons>
				<uni-easyinput v-model="searchKeyword" placeholder="搜索活动名称或日期" placeholderStyle="color: #a0b1c5;"
					:inputBorder="false" class="custom-search-input" @input="debounceSearch" />
			</view>
		</view>

		<!-- 活动列表 -->
		<view class="activity-list">
			<view v-for="(activity, index) in filteredActivities" :key="index" class="activity-card"
				@click="goToEdit(activity._id)">
				<view class="card-header">
					<view class="activity-name">
						<uni-icons type="calendar" size="18" color="#1a73e8"></uni-icons>
						<text>{{ activity.name }}</text>
					</view>
					<view class="status-container">
						<!-- <view class="status-badge" :class="{'active': activity.isSave}">
							{{ activity.isSave ? '已启用' : '已停用' }}
						</view> -->
						<view class="time-status" :class="[ 'time-' + calcActivityStatus(activity) ]">
							{{ getTimeStatusText(activity) }}
						</view>
					</view>
				</view>

				<view class="activity-details">
					<view class="detail-item">
						<uni-icons type="calendar" size="16" color="#7a8fa6"></uni-icons>
						<text>{{ activity.date }}</text>
					</view>
					<view class="detail-item">
						<uni-icons type="clock" size="16" color="#7a8fa6"></uni-icons>
						<text>{{ formatTime(activity.timeRange.start) }} - {{ formatTime(activity.timeRange.end) }}</text>
					</view>
					<view class="detail-item">
						<uni-icons type="location" size="16" color="#7a8fa6"></uni-icons>
						<text>{{ activity.locationName || '未设置地点' }}</text>
					</view>
				</view>

				<view class="location-info">
					<text class="coordinate">经度: {{ activity.longitude || '--.--' }}</text>
					<text class="coordinate">纬度: {{ activity.latitude || '--.--' }}</text>
				</view>
			</view>

			<!-- 加载状态提示 -->
			<view v-if="loading" class="loading-section">
				<uni-load-more status="loading" color="#1a73e8"></uni-load-more>
			</view>
			<view v-if="!hasMore && !loading" class="loading-section">
				<text class="loading-text">已经到底了~</text>
			</view>
			<view v-if="filteredActivities.length === 0 && !loading" class="empty-state">
				<image src="/static/avatar/empty.png" class="empty-image"></image>
				<text class="empty-text">没有找到相关活动</text>
			</view>
		</view>

		<!-- 创建按钮 -->
		<!-- <view class="create-button" @click="goToCreateActivity">
			<uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
			<text>创建活动</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activities: [],
				searchKeyword: '',
				filteredActivities: [],
				page: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				debounceTimer: null
			}
		},
		onLoad() {
			this.getActivities();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.hasMore = true;
			this.getActivities(true);
		},
		onReachBottom() {
			if (this.hasMore) {
				this.page++;
				this.getActivities();
			}
		},
		methods: {
			async getActivities(refresh = false) {
				if (!this.hasMore || this.loading) return;
				this.loading = true;

				// 显示加载动画
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				const obj = uniCloud.importObject('check');
				const res = await obj.searchActivities({
					keyword: this.searchKeyword,
					page: this.page,
					pageSize: this.pageSize
				}).catch(() => {
					uni.showToast({
						title: '获取活动失败',
						icon: 'none'
					});
					this.loading = false;
					uni.hideLoading();
				});

				if (res && res.code === 0) {
					const newData = res.data || [];
					if (refresh) {
						this.activities = newData;
					} else {
						this.activities = [...this.activities, ...newData];
					}
					this.hasMore = newData.length === this.pageSize;
					this.filterActivities(); // 更新搜索结果
				}
				this.loading = false;
				uni.hideLoading();
				uni.stopPullDownRefresh();
			},

			// 格式化时间（去掉秒）
			formatTime(timeString) {
				if (!timeString) return '';
				return timeString.substring(0, 5);
			},

			// 计算活动时间状态
			calcActivityStatus(activity) {
				if (!activity.date || !activity.timeRange) return 'ended';

				const now = new Date();
				const startTime = new Date(`${activity.date}T${activity.timeRange.start}`);
				const endTime = new Date(`${activity.date}T${activity.timeRange.end}`);

				if (now < startTime) return 'upcoming';
				if (now >= startTime && now <= endTime) return 'ongoing';
				return 'ended';
			},

			// 获取时间状态文本
			getTimeStatusText(activity) {
				const status = this.calcActivityStatus(activity);
				switch (status) {
					case 'upcoming':
						return '未开始';
					case 'ongoing':
						return '进行中';
					case 'ended':
						return '已结束';
					default:
						return '';
				}
			},

			// 获取时间状态类名
			getTimeStatusClass(activity) {
				const status = this.calcActivityStatus(activity);
				return `time-${status}`;
			},

			// 模糊搜索逻辑
			debounceSearch() {
				if (this.debounceTimer) {
					clearTimeout(this.debounceTimer);
				}
				this.debounceTimer = setTimeout(() => {
					this.page = 1;
					this.hasMore = true;
					this.activities = [];
					this.getActivities();
				}, 500);
			},
			filterActivities() {
				if (!this.searchKeyword.trim()) {
					this.filteredActivities = this.activities;
					return;
				}

				const keyword = this.searchKeyword.trim().toLowerCase();
				this.filteredActivities = this.activities.filter(activity => {
					const nameMatch = activity.name.toLowerCase().includes(keyword);
					const dateMatch = activity.date.includes(keyword);
					return nameMatch || dateMatch;
				});
			},
			goToEdit(activityId) {
				uni.$router.to({
					url: 'pagesB/checkin/checkin',
					params: {
						_id: activityId
					}
				});
			}
		}
	}
</script>

<style scoped>
	/* 整体容器 */
	.container {
		padding: 25rpx 30rpx 50rpx;
		background: linear-gradient(to bottom, #f0f8ff, #ffffff);
		min-height: 100vh;
	}

	/* 头部标题 */
	.header {
		padding: 30rpx 20rpx 25rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #1a73e8;
		display: block;
		letter-spacing: 1rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #7a8fa6;
		display: block;
		margin-top: 10rpx;
	}

	/* 搜索区域 */
	.search-section {
		padding: 20rpx 0 30rpx;
	}

	.search-box {
		position: relative;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(26, 115, 232, 0.1);
		display: flex;
		align-items: center;
	}

	.search-icon {
		margin-right: 15rpx;
	}

	.custom-search-input {
		flex: 1;
		background: transparent;
	}

	/* 活动卡片 */
	.activity-list {
		padding-bottom: 100rpx;
	}

	.activity-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 25rpx rgba(26, 115, 232, 0.08);
		border: 1rpx solid #e6f0ff;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f7ff;
		margin-bottom: 20rpx;
	}

	.status-container {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.activity-name {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #1a3e78;
	}

	.activity-name text {
		margin-left: 12rpx;
	}

	.status-badge {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 30rpx;
		background-color: #e8f4ff;
		color: #1a73e8;
		font-weight: 500;
	}

	.time-status {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 30rpx;
		font-weight: 500;
	}

	.time-upcoming {
		background-color: #e6f7ff;
		color: #1890ff;
		border: 1px solid #91d5ff;
	}

	.time-ongoing {
		background-color: #f6ffed;
		color: #52c41a;
		border: 1px solid #b7eb8f;
	}

	.time-ended {
		background-color: #fafafa;
		color: #999;
		border: 1px solid #d9d9d9;
	}

	.status-badge.active {
		background-color: #e6ffed;
		color: #0c9c4a;
	}

	/* 活动详情 */
	.activity-details {
		margin-bottom: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 26rpx;
		color: #5a6b82;
	}

	.detail-item text {
		margin-left: 12rpx;
	}

	/* 位置信息 */
	.location-info {
		display: flex;
		background-color: #f8fbff;
		border-radius: 12rpx;
		padding: 15rpx 20rpx;
		margin-top: 15rpx;
	}

	.coordinate {
		font-size: 24rpx;
		color: #7a8fa6;
		font-family: monospace;
		margin-right: 30rpx;
	}

	/* 加载状态 */
	.loading-section {
		padding: 40rpx 0;
		text-align: center;
	}

	.loading-text {
		font-size: 26rpx;
		color: #7a8fa6;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 80rpx 0;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		opacity: 0.6;
	}

	.empty-text {
		display: block;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #7a8fa6;
	}

	/* 创建按钮 */
	.create-button {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #1a73e8, #0d5cb6);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 25rpx rgba(26, 115, 232, 0.4);
		z-index: 10;
	}

	.create-button text {
		margin-left: 12rpx;
	}
</style>